<template>
  <div
    class="grid_item flex flex-row align-center"
    :style="itemStyle"
    v-if="show">
    <span
      class="grid_item_label"
      :class="{grid_item_label_bg: labelBg}"
    >{{label}}：</span>
    <span
      class="grid_item_txt"
      :style="{
        minHeight: minHeight,
        color: itemTxtColor
      }"
      v-html="txt"
    >
    </span>
  </div>
</template>

<script>
export default {
  name: 'AppInfoItem',
  props: {
    label: {
      type: [String, Number],
      default: ''
    },
    txt: {
      type: [String, Number],
      default: null
    },
    show: {
      type: Boolean,
      default: true
    },
    labelBg: {
      type: Boolean,
      default: false
    },
    itemStyle: {
      type: Object,
      default() {
        return {
          'min-width': '218px'
        }
      }
    },
    itemTxtColor: {
      type: String,
      default: ''
    },
    minHeight: {
      type: String,
      default: ''
    },
    itemTxtStyle: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style lang="scss">
.grid_item {
  display: flex;
  margin: 1px 0px;
  min-width: 120px;
  line-height: 24px;
  /deep/ .el-radio {
    margin-right: 16px !important;
  }
  .grid_item_label {
    min-width: 80px;
    padding-left: 10px;
    border-radius: 3px;
    text-align: right;
    color: #666;
    // height: 100%;
  }
  .grid_item_label_bg{
    background-color: #f3f5fa;
  }
  .grid_item_txt {
    flex: 1;
    // background: #fff;
    // border: solid 1px #dfdedd;
    max-height: 60px;
    overflow-y: auto;
    padding: 0 2px;
  }
}
.grid_item_txt .el-radio {
  margin-right: 16px !important;
}
</style>
